<template>
  <div class="">
    <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
      <div>
        <el-date-picker v-model="dateTime.time" @change="dateChange" type="date" placeholder="Pick a day"
          date-format="YYYY-MM-DD" value-format="YYYY-MM-DD" :default-value="dateTime.time" />
        <el-button style="margin-left: 10px;" @click="getSearch" type="primary">搜索</el-button>
      </div>
      <el-button v-print="printObj" v-loading.fullscreen.lock="loading" type="primary">打印</el-button>
    </div>
    <div id="printTable">
      <table cellspacing="0" border class="bordered-table">
        <thead>
          <tr>
            <td colspan="15" class="h2">
              <h2>重症医学科医疗组交班报告</h2>
            </td>
          </tr>
          <tr>
            <td colspan="2">{{ getJiaoBanData.date }}</td>
            <td>病员总数:{{ getJiaoBanData.patientCount || 0 }}</td>
            <td>转出</td>
            <td>{{ getJiaoBanData.outCount }}</td>
            <td>转入</td>
            <td>{{ getJiaoBanData.inCount }}</td>
            <td>手术</td>
            <td>{{ getJiaoBanData.ssCount }}</td>
            <td>死亡</td>
            <td>{{ getJiaoBanData.swCount }}</td>
            <td colspan="5">出院：{{ getJiaoBanData.cyCount || 0 }}</td>
          </tr>
          <tr>
            <td>床号</td>
            <td>姓名</td>
            <td colspan="2">诊断</td>
            <td>患者情况</td>
            <td>体温/℃</td>
            <td>血糖<br>(mmol/L)</td>
            <td>静脉<br class="br">(ml)</td>
            <td>胃肠<br class="br">(ml)</td>
            <td>尿量<br class="br">(ml)</td>
            <td>大便<br class="br">(ml)</td>
            <td>痰液<br class="br">(ml)</td>
            <td>胃液<br class="br">(ml)</td>
            <td>备注</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, idnex) in getJiaoBanList.list" :key="idnex">
            <td class="thtd">{{ item.BedName ? item.BedName : '' }}</td>
            <td class="thtd">{{ item.Name ? item.Name : '' }}</td>
            <td class="thtd thtd2" colspan="2">{{ item.Remarks ? item.Remarks : '' }}</td>
            <td class="thtd thtd3">
              <el-select v-model="item.state" placeholder="请选择" clearable>
                <el-option v-for="(item, index) in ['新人', '手术','转出','死亡','']" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              <p class="state">{{ item.state }}</p>
            </td>
            <td class="thtd">
              <div v-html="item.TW" v-if="item.TW"></div>
            </td>
            <td class="thtd">
              <div v-html="item.XT" v-if="item.XT"></div>
            </td>
            <td class="thtd">{{ item.JM ? item.JM : '' }}</td>
            <td class="thtd">{{ item.WC ? item.WC : '' }}</td>
            <td class="thtd">{{ item.NL ? item.NL : '' }}</td>
            <td class="thtd">{{ item.DB ? item.DB : '' }}</td>
            <td class="thtd">{{ item.TY ? item.TY : '' }}</td>
            <td class="thtd">{{ item.WY ? item.WY : '' }}</td>
            <td class="thtd thtd2" colspan="1">
              {{ item.BZ ? item.BZ : ''}}
            </td>

          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue"
import { GetJIAOBAN_1, GetJIAOBAN_2 } from "../api/book.js"
let getJiaoBanData = reactive({})
let getJiaoBanList = reactive({ list: [] })
let defaultTime = reactive([])
let dateTime = reactive({
  time: ''
})
let show = ref(false)
const loading = ref(false)

// 获取数据
onMounted(() => {
  const date = formattedDate()
  defaultTime = date
  dateTime.time = formattedDate()
  getSearch()
})

// 获取日期病员相关数据
const GetJIAOBAN1 = () => {
  loading.value = true
  GetJIAOBAN_1(dateTime.time).then(data => {
    getJiaoBanData = data.summer[0]
    getJiaoBanList.list = data.record.map(v=>{
      v.state=''
      return v
    })
    loading.value = false
  }).catch(error => {
    loading.value = false
    console.log(error)
  })
}
// 日期选择改变
const dateChange = (val) => {
  dateTime.time = val ? val : formattedDate()
}
const getSearch = () => {
  GetJIAOBAN1()
}
// 获取列表数据
const GetJIAOBAN2 = async () => {
  let data = await GetJIAOBAN_2(dateTime.time)
  getJiaoBanList.list = data
}
// 格式化时间
const formattedDate = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const formattedDate = `${year}-${month}-${day}`;
  return formattedDate;
}
const printObj = {
  id: 'printTable',
  preview: false,
  previewTitle: '打印预览',
  popTitle: 'good print',
  minW: '100%',
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/><style>@media print { @page { size: landscape; } .print-title { position: running(header); text-align: center; font-size: 22px; font-weight: 600; padding: 10px 0; margin: 0; } @page { @top-center { content: element(header); } } }</style>',
  beforeOpenCallback(vue) {
    console.log('打开之前')
    show.value = true
  },
  openCallback(vue) {
    console.log('执行了打印')
  },
  closeCallback(vue) {
    show.value = false
    console.log('关闭了打印工具')
  },
  header: {
    display: true,
    content: `<div class="print-title">重症医学科医疗组交班报告</div><div style="text-align: center;">${formattedDate()}</div>`,
    style: 'font-size: 12px; color: #000;'
  },
  footer: {
    display: true,
    content: `<div style="text-align: center;">第 <span class="pageNumber"></span> 页 / 共 <span class="totalPages"></span> 页</div>`,
    style: 'font-size: 12px; color: #000;'
  }
}
</script>

<style scoped>
body {
  background-color: white !important;
  flex: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.h2 {
  border: 1px solid black;
  border-bottom: none;
  box-sizing: border-box;
  font-size: 22px;
  width: 1800px;
  font-weight: 600;
  padding: 10px 0;
  margin: 0;
}

.bordered-table {
  border-collapse: collapse;
  border: 1px solid black;
  width: 1800px;
}

.bordered-table th,
.bordered-table td {
  padding: 5px;
  min-width: 80px;
  border: 1px solid black;
  box-sizing: border-box;
  word-break: break-all
}

.br {
  display: none;
}

.bordered-table .thtd {
  width: 100px
}
.bordered-table .thtd3{
  width: 200px
}
.bordered-table .thtd2 {
  width: 200px; /* 减小患者情况列的宽度 */
  text-align: left;
  white-space: wrap;
}

.renarksp {
  display: none;
}
.state{
  display: none;
}
@media print {
  body {
    margin: 0;
    padding: 0;
    width: 100vw;
  }
  #printTable {
    width: 100% !important;
    max-width: 100% !important;
    transform-origin: 0 0;
  }
  .bordered-table {
    width: 100%;
  }

  .h2 {
    width: 100%;
  }

  .input {
    box-shadow: none !important;
  }

  td {
    font-size: 9pt;
  }

  td {
    text-align: center;
  }

  .bordered-table td {
    font-size: 9pt;
    box-sizing: border-box;
    padding: 2pt;
    min-width: 12pt;
    max-width: 60pt;
    print-color-adjust: exact;
    page-break-inside: avoid;
    word-break: break-all
  }
  
  .bordered-table .thtd {
    font-size: 8pt;
    min-width: 12pt;
    max-width: 36pt;
  }

  .bordered-table .thtd:nth-child(2) {
    min-width: 36pt; /* 设置姓名列的最小宽度 */
  }
  .bordered-table .thtd2 {
    min-width: 36pt; /* 设置姓名列的最小宽度 */
  }
  .bordered-table .thtd2 {
    min-width: 60pt; /* 增加备注列的最小宽度 */
    max-width: 120pt; /* 增加备注列的最大宽度 */
  }

  ::v-deep .el-textarea__inner {
    box-shadow: none !important;
    resize: none !important;
    white-space: normal;
    display: none;
    word-break: break-all;
  }

  .renarksp {
    text-align: left;
    display: inline-block;
  }

  .br {
    display: block;
  }

  .bordered-table .thtd:nth-child(5),
  .bordered-table .thtd:nth-child(6),
  .bordered-table .thtd:nth-child(7),
  .bordered-table .thtd:nth-child(8),
  .bordered-table .thtd:nth-child(9),
  .bordered-table .thtd:nth-child(10),
  .bordered-table .thtd:nth-child(11) {
    min-width: 24pt;
    max-width: 36pt;
  }

  .bordered-table thead {
    display: table-header-group;
  }

  .el-select {
    display: none; /* 隐藏下拉选择框 */
  }
  .state{
    display: block;
    text-align: center;
  }
}
</style>